/*
 * @Author: Drc
 * @Date: 2021-08-31 17:21:57
 * @LastEditTime: 2021-09-06 10:05:38
 * @LastEditors: Drc
 */

import React, {memo} from 'react'
import {ScrollView, View} from 'react-native'
import Pop, {PopProps} from './index'
import Theme from '@path/config/theme'
import {px2dp} from '@path/config/system'
import ConfirmBtn from '@path/components/ConfirmBtn'
import {HostDao, Host} from '@path/utils/http'
import _ from 'lodash'

interface LineSwitchPopProps extends PopProps {
  onSelect: (host: Host) => any
}

/**
 * 选择语言弹窗
 */
class LineSwitchPop extends Pop<LineSwitchPopProps> {
  static defaultProps: LineSwitchPopProps = {
    ...super.defaultProps,
    animationIn: 'slideInUp',
    animationOut: 'slideOutDown',
    style: {justifyContent: 'flex-end'},
  }

  renderContent = () => {
    return (
      <View
        style={{
          maxHeight: '60%',
          alignSelf: 'flex-end',
          width: '100%',
          backgroundColor: Theme.getThemeColor('bg'),
          paddingTop: px2dp(30),
          paddingBottom: px2dp(54),
          flex: 0,
          alignItems: 'center',
        }}>
        <ScrollView
          style={{width: '100%'}}
          bounces={false}
          contentContainerStyle={{
            alignItems: 'center',
            flex: 0,
          }}>
          {HostDao.getList()?.map((item, index) => {
            return (
              <ConfirmBtn
                key={item.host}
                style={{marginBottom: px2dp(14)}}
                btnTheme={HostDao.currentHost?.host === item.host ? 'Main' : 'Minor'}
                text={item.title}
                onPress={() => {
                  typeof this.props.onSelect === 'function' && this.props.onSelect(item)
                }}
              />
            )
          })}
        </ScrollView>
      </View>
    )
  }
}

export default memo(LineSwitchPop, (prev, next) => _.isEqual(prev.isVisible, next.isVisible))
